<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        function fn1(){

        }
//赋值型的声明函数
        var fn2 = function(x,y){
            return x+y;
        }

//改写为箭头函数 =>
        var fn3 = (x,y) => x+y;
//参数和返回值都只有一个时
        var fn4 = x => x;
//如果一个箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
        var fn5 = () => 10;

//如果箭头函数的代码块部分多于一条语句，就要使用大括号将他们括起来，并且使用return语句返回
var fn6 = function(x,y){
    var z = 10;
    return x+y+z;
}
//改写为fn7
var fn7 = (x,y) => {
    var z = 10;
    return x+y+z;
}

//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
var fn8 = function(){
    return{
        x:10,
        y:20
    }
}
//改
var fn9 = () => ({x:10,y:20})

//箭头函数的一个用处时简化回调函数（匿名函数）
var arr = [10,20,30];
arr.map(function(element,index){
    console.log(element);
    
})
//改
arr.map((element,index)=>{
    console.log(element);
    
})

//使用注意点
//对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。
// 他没有自己的this对象，内部的this就是定义时上层作用域中的this
/*
var name = "ime";
var user = {
    name:"iwen",
    age:20,
    getName(){
        console.log(this.name);//iwen
        
    }
}
user.getName();
*/
/*
var name = "ime";
var user = {
    name:"iwen",
    age:20,
    getName(){
        setTimeout(function(){
            console.log(this.name);//ime
            
        })
        
    }
}
user.getName();
*/
var name = "ime";
var user = {
    name:"iwen",
    age:20,
    getName(){
        setTimeout(() => {
            console.log(this.name);//iwen
            
        })
        
    }
}
user.getName();
    </script>
</body>
</html>